<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./OL_SDK/include-openlayers-local.js"></script>
    <script src="./libs/gaode.js"></script>
    <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
</head>

<body>
    <div id="dir-tree"></div>
    <div id="map">
    </div>
    <script>
        var docLayer = new Zondy.Map.Doc("", "myTestMap", {

        })
        var map = new ol.Map({
            target: "map",
            layers: [gaode, docLayer],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 4
            })
        })
        /* 获取地图文档的信息 */
        var docInfos = new Zondy.Catalog.MapDoc({
            docName: "myTestMap"
        })
        console.log(docInfos, 'docInfos')
        /* getLayersInfo异步// 就好像通过一个异步请求，获得图层的信息 */
        let children = []
        docInfos.getLayersInfo(data => {
            console.log(data, 'data')// {succeed:true,value:[{},{},……]}
            data.value.forEach(item => {
                let { LayerIndex, Name } = item;
                console.log(LayerIndex, Name)
                // '0'  'myPlaneLayer' 
                // ……
                // '4'  'testPointLayer'
                // ……
                children.push({
                    id: LayerIndex,
                    label: Name
                })
            })
            /* 将DOM渲染出来 */
            // console.log(children)
            children.forEach(item => {
                var template = `<input type="checkbox" checked id=${item.id}> ${item.label}`
                $("#dir-tree").append(template)
            })
        })

        /* setTimeout(() => {
            $("#dir-tree input").change(evt => {
                console.log(evt.target)// 30ms，获取不到
            })
        }, 30) */

        /* setTimeout(() => {
            $("#dir-tree input").change(evt => {
                console.log(evt.target)// 300ms，就能获取到
            })
        }, 300) */

        window.onload = function () {
            /* 等DOM加载完毕，等待网页上相关的资源加载完毕,再执行事件处理函数中的操作 */
            // window.onload回调执行时，网络请求已完成，且请求到的数据更新已完成，且dom的更新也已完成。
            // 包括一开始有新增和去除dom的操作，也会已完成。
            // 这些都完成之后，才执行window.onload回调。
            $("#dir-tree input").change(evt => {
                //window.onload发生时，已经能获取到$("#dir-tree input")
                // console.log(evt.target)// <input type="checkbox" checked id="0">
                var checked = evt.target.checked;
                console.log(checked)
                /* 获取图层的下标 */
                var index = evt.target.id;
                console.log(index)
                docLayer.setLayerStatus([index], checked ? 'include' : 'exclude')
            })
        }

    </script>
</body>

</html>